import React, { useState } from 'react';
import { useHistory } from 'react-router-dom'

import back from '@a/images/back2.png'

const Header = (props) => {
  const history  = useHistory()



  let [sty] = useState({
    dis: props.right ? 1 : "none"
  })
  const handleClick =(go)=>{
    return () => {
    go === 1 
    ? history.goBack()
    : history.push(`${go}`)
  }}
  return (
    <div style={{
      backgroundColor: `${props.bgc}`,
      position: 'fixed',
      width: '100%',
      top: 0
    }}>
      <header style={{
        height: '.44rem',
        lineHeight: '.44rem',
        textAlign: 'center',
        fontSize: '.17rem',
        backgroundColor: `${props.bgc}`,
        color: '#fff',
        padding: '0 0.09rem',
        display: 'flex',
        alignItems: 'center',
        position: 'relative'
      }}>
        <img
          onClick={handleClick(1)}
          src={`${back}`}
          style={{ width: '0.085rem', height: '0.15rem' }}
          alt='' />
        <span style={{ flex: '1' }}>{props.title}</span>
        <i style={{ width: '0rem' }}></i>
        <div
          onClick={handleClick(`${props.to}`)}
          style={{ position: 'absolute', right: '.15rem', fontSize: '.15rem', display: `${sty.dis}` }}>
          {props.right}
        </div>
      </header>

    </div>
  )
}
export default Header